<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/main' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>资金检查</el-breadcrumb-item>
    </el-breadcrumb>
    <br />
    <br />

    <span>
      搜索：
      <el-input style="width:15rem" placeholder="账户名" @input="search" v-model="account"></el-input>
    </span>
    <el-date-picker
      v-model="value"
      type="daterange"
      start-placeholder="开始时间"
      end-placeholder="截止时间"
      value-format="yyyy-MM-dd"
      :default-time="['00:00:00', '23:59:59']"
      @change="search"
    ></el-date-picker>
    <el-button type="primary" icon="el-icon-search"></el-button>
    <el-divider></el-divider>
    <el-table 
    :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
    style="width: 100%"
    height="600"
    >
      <el-table-column prop="transaction_audit_id" label="Transaction audit id"></el-table-column>
      <el-table-column prop="user_id" label="用户ID"></el-table-column>
      <el-table-column prop="name" label="用户名"></el-table-column>
      <el-table-column
        prop="type"
        label="业务类型"
        :filter-method="filterHandler"
        :filters="[{ text: '订金', value: 'Deposit' }, { text: '退款', value: 'Withdraw' }]"
      ></el-table-column>
      <el-table-column prop="amount" label="金额"></el-table-column>
      <el-table-column prop="time" label="请求时间"></el-table-column>
      <el-table-column
        prop="state"
        label="状态"
        :filter-method="filterHandler"
        :filters="[{ text: '请求', value: 'Applying' }, { text: '完成', value: 'Completed'}, { text: '失败', value: 'Failed'}]"
      ></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="success" size="mini" @click="pass(scope.row)">通过</el-button>
          <el-button type="primary" size="mini" @click="refuse(scope.row)">拒绝</el-button>
        </template>
      </el-table-column>
    </el-table>
    <br>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10,12,table.length]"
      :page-size="pagesize"
      layout="total,sizes,prev,pager,next,jumper"
      :total="tableData.length"
    ></el-pagination>
    <el-dialog title="拒绝请求" :visible.sync="dialogVisible" width="23%">
      <span>上传order：</span>
      <br />
      <br />
      <el-upload
        ref="upload"
        drag
        action="http://localhost:3000/api/file/up"
        :file-list="fileList"
        :on-change="fileChange"
        :auto-upload="false"
        list-type="picture"
        :limit="1"
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">
          将文件拖到此处，或
          <em>点击上传</em>
        </div>
        <div
          class="el-upload__tip"
          slot="tip"
        >建议上传JPG/PNG文件，且不超过500kb</div>
      </el-upload>
      <br />
      <span>
        原因：
        <el-input style="width:18rem" v-model="reason" placeholder="拒绝理由"></el-input>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="diaCancel">取消</el-button>
        <el-button type="primary" @click="sure">确认</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: "",
      count: 0,
      fileList: [],
      dialogVisible: false,
      account: "",
      tableData: [],
      table: [],
      tableData1: [],
      reason: "",
      currentPage: 1, //默认页码为1
      pagesize: 10, //默认一页显示11条
    };
  },

  mounted() {
    this.$post("/wal/getroleid", {
      user_id: sessionStorage.getItem("user_id")
    }).then(res => {
      if (res.message == "0") {
        this.getAudit();
      } else {
        this.$message.warning("权限被拒");
      }
    });
  },
  methods: {
    handleSizeChange(size) {
      //一页显示多少条
      this.pagesize = size;
    },
    handleCurrentChange(currentPage) {
      //页码更改方法
      this.currentPage = currentPage;
    },
    getAudit() {
      this.tableData = [];
      this.$post("/wal/getAudit", {
        user_id: sessionStorage.getItem("user_id")
      }).then(res => {
        if (res.code == 200) {
          for (var i = 0; i < res.data.WalletTransactionAudit.length; i++) {
            var date =
              res.data.WalletTransactionAudit[i].create_time.slice(0, 10) +
              " " +
              res.data.WalletTransactionAudit[i].create_time.slice(11, 19);
            var ty;
            if (res.data.WalletTransactionAudit[i].operate_type == 1) {
              ty = "Deposit";
            } else if (res.data.WalletTransactionAudit[i].operate_type == 2) {
              ty = "Withdraw";
            } else if (res.data.WalletTransactionAudit[i].operate_type == 3) {
              ty = "Consume";
            } else if (res.data.WalletTransactionAudit[i].operate_type == 4) {
              ty = "Refund";
            }
            var st;
            if (res.data.WalletTransactionAudit[i].status == 1) {
              st = "Applying";
            } else if (res.data.WalletTransactionAudit[i].status == 2) {
              st = "Completed";
            } else if (res.data.WalletTransactionAudit[i].status == 0) {
              st = "Failed";
            }
            this.tableData.push({
              user_id: res.data.WalletTransactionAudit[i].buyer_id,
              transaction_audit_id:
                res.data.WalletTransactionAudit[i].transaction_audit_id,
              name: res.data.name[i],
              type: ty,
              amount: res.data.WalletTransactionAudit[i].operate_money,
              time: date,
              state: st
            });
            this.table.push({
              user_id: res.data.WalletTransactionAudit[i].buyer_id,
              transaction_audit_id:
                res.data.WalletTransactionAudit[i].transaction_audit_id,
              name: res.data.name[i],
              type: ty,
              amount: res.data.WalletTransactionAudit[i].operate_money,
              time: date,
              state: st
            });
          }
        } else {
          if (res.message == "Permission denied") {
            this.$message.warning("权限被拒");
          }
        }
      });
    },
    sure() {
      if (this.reason == "") {
        this.$message.warning("理由不能为空");
        return;
      }
      // if (this.count == 0) {
      //   this.$message.warning("Please upload the order img");
      //   return;
      // }
      console.log(this.tableData1);
      if (this.tableData1.state == "Applying") {
        this.$post("/wal/adminAudit", {
          admin_id: sessionStorage.getItem("user_id"),
          user_id: this.tableData1.user_id,
          transaction_audit_id: this.tableData1.transaction_audit_id,
          status: 0
        }).then(res => {
          if (res.code == 200) {
            this.$message.success("成功拒绝!");
            this.getAudit();
          }
        });
      } else {
        this.$message.warning("已处理");
      }

      this.dialogVisible = false;
    },
    diaCancel() {
      this.dialogVisible = false;
      this.count = 0;
      this.reason = "";
      this.fileList = [];
    },
    filterHandler(value, row, column) {
      const property = column["property"];
      return row[property] === value;
    },
    search() {
      let timelist = [];
      if (!this.value) {
        timelist = ["1900-01-01", "2200-01-01"];
      } else {
        timelist = this.value;
      }
      this.tableData = this.table.filter(
        e =>
          e.name.match(this.account) &&
          timelist[0] <= e.time.slice(0, 10) &&
          e.time.slice(0, 10) <= timelist[1]
      );
    },
    pass(row) {
      if (row.state == "Applying") {
        this.$post("/wal/adminAudit", {
          admin_id: sessionStorage.getItem("user_id"),
          user_id: row.user_id,
          transaction_audit_id: row.transaction_audit_id,
          status: 2
        }).then(res => {
          if (res.code == 200) {
            this.$message.success("成功通过!");
            this.getAudit();
          }
        });
      } else {
        this.$message.warning("已处理");
      }
    },
    refuse(row) {
      this.dialogVisible = true;
      this.tableData1 = row;
    },
    fileChange() {
      this.count++;
    }
  }
};
</script>

<style scoped>
.table >>> .el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background-color: #07c2fc;
  border-color: #07c2fc;
}
.table >>> .el-checkbox__input.is-checked .el-checkbox__inner {
  background-color: #07c2fc;
  border-color: #07c2fc;
}
.table >>> .el-checkbox__input.is-checked + .el-checkbox__label {
  color: #07c2fc;
}
</style>